<template>
  <el-form ref="formRef" :model="state.formData" label-width="100px">
    <div class="fieldset">
      <div class="legend">基本属性</div>
      <slot name="property-end-type" :model="state.formData" field="type">
        <el-form-item label="任务类型">
          <el-input v-model="state.formData.type" :disabled="true"></el-input>
        </el-form-item>
      </slot>

      <slot name="property-end-name" :model="state.formData" field="name">
        <el-form-item label="任务类型">
          <el-input v-model="state.formData.name" :disabled="true"></el-input>
        </el-form-item>
      </slot>

      <slot name="property-end-display_name" :model="state.formData" field="display_name">
        <el-form-item label="显示名称">
          <el-input v-model="state.formData.display_name"></el-input>
        </el-form-item>
      </slot>
    </div>

    <div class="fieldset">
      <div class="legend">样式设置</div>
      <el-form-item label="宽度">
        <el-input-number v-model="state.formData.width" controls-position="right" />
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number v-model="state.formData.height" controls-position="right" />
      </el-form-item>
      <el-form-item label="边线宽度">
        <el-input-number
          :min="1"
          :max="5"
          v-model="state.formData.linewidth"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="主题颜色">
        <el-color-picker v-model="state.formData.fill" />
      </el-form-item>
      <el-form-item label="文字颜色">
        <el-color-picker v-model="state.formData.stroke" />
      </el-form-item>
    </div>

    <div class="fieldset">
      <div class="legend">拦截设置</div>
      <slot
        name="property-end-pre_iterceptors"
        :model="state.formData"
        field="pre_iterceptors"
      >
        <el-form-item label="前置拦截器">
          <el-input v-model="state.formData.pre_iterceptors"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-end-post_interceptors"
        :model="state.formData"
        field="post_interceptors"
      >
        <el-form-item label="后置拦截器">
          <el-input v-model="state.formData.post_interceptors"></el-input>
        </el-form-item>
      </slot>
    </div>
  </el-form>
</template>

<script lang="ts">
import { reactive, ref, watch, defineProps, onMounted, defineEmits } from "vue";
import { FlowFormModel } from "../types";
export default {
  name: "ingeniousEnd",
};
</script>

<script setup lang="ts">
const formRef = ref(null);
const state = reactive({
  formData: {} as FlowFormModel,
});

const props = defineProps<{
  modelValue: FlowFormModel;
}>();

const emits = defineEmits(["update:modelValue"]);

watch(
  () => state.formData,
  (n, o) => {
    emits("update:modelValue", Object.assign(props.modelValue, state.formData));
  },
  { deep: true }
);

onMounted(() => {
  Object.assign(state.formData, props.modelValue);
});
</script>
